<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<link type="text/css" href="css/main.css" rel="stylesheet" />
<div id="contents">
<div id="sect">
	<!-- 추천영화 -->
	<div id="m">
		<div id="carousel-example-generic" class="carousel slide"
			data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0"
					class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="images/mainbanner/1.jpg" alt="...">
					<div class="carousel-caption"></div>					
				</div>
				<div class="item">
					<img src="images/mainbanner/2.jpg" alt="...">
					<div class="carousel-caption"></div>					
				</div>
				<div class="item">
					<img src="images/mainbanner/3.jpg" alt="...">
					<div class="carousel-caption"></div>					
				</div>				
				<div class="item">
					<img src="images/mainbanner/4.jpg" alt="...">
					<div class="carousel-caption"></div>					
				</div>				
			</div>
			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic"
				data-slide="prev"><span
				class="glyphicon glyphicon-chevron-left"></span>
			</a> <a class="right carousel-control" href="#carousel-example-generic"
				data-slide="next"><span
				class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
	</div>
	<!-- 로그인, 광고 -->
	<div id="login">
		<fieldset>
		<legend class="blind">로그인</legend>
			<c:if test="${ empty sessionScope.uid }">
			<form name="loginFrm" method="post" action="login.bi">				
				<label for="uid" class="blind">아이디</label>
				<input type="text" name="uid" id="uid" title="아이디" placeholder="아이디"/>
				<label for="pwd" class="blind">비밀번호</label>
				<input type="password" name="pwd" id="pwd" title="비밀번호" placeholder="비밀번호"/>
				<button type="submit" id="loginBtn" title="로그인" onclick="sa()">로그인</button>
				<ul class="clearf" id="memmenu">
					<li><input type="checkbox" name="saveid" id="saveid" class="clearf"/>
						<label for="saveid" id="saveidm">아이디 저장</label></li>
					<li><a href="#" data-toggle="modal" data-target="#joinModal">회원가입</a></li>
					<li><a href="id_pwd_find.bi">아이디/비밀번호 찾기</a></li>
				</ul>
			</form>
			</c:if>
			<c:if test="${ not empty sessionScope.uid }">
			<span id="uname"><span>${ sessionScope.uname }님</span> 환영합니다.</span>
			<a id="logoutBtn" href="logout.bi" class="btn btn-default">로그아웃</a>
			<p id="memmenu2"><a href="rsrv_info.bi" class="btn btn-default">예매 확인</a>
				<c:if test="${ sessionScope.uid eq 'admin' }">
					<a href="admin.bi" class="btn btn-default">관리페이지</a>
				</c:if>
				<c:if test="${ sessionScope.uid ne 'admin' }">
					<a href="mypage.bi" class="btn btn-default">마이페이지</a>
				</c:if>
			</p>			
			</c:if>
		</fieldset>		
		<!-- 광고 -->
		<div id="ad"><img src="images/addd.gif" /></div>
	</div>
</div>	
	<!-- 영화순위 -->
	<div id="moviechart" class="clearf">
	<h2 id="mctit">영화 순위</h2>
		<ul id="chartmenu">
			<li><a href="?order=1">예매순</a></li>
			<li><a href="?order=3">평점순</a></li>
			<li><a href="?order=2">개봉예정</a></li>
		</ul>
		<ul id="poster" class="clearf">
		<c:forEach var="mv" items="${ moviechart }" varStatus="status">
			<li><span id="ranking">${ status.count }</span>				
				<div class="posterimg">
					<a href="mov_info.bi?movno=${ mv.movno }"><img src="image.bi?id=poster/${ mv.movno }.jpg" alt="영화 포스터" /></a>
					<div class="box">
					<span id="chartmn">${ chartmn }<span>
					<c:choose>
						<c:when test="${ chartnum eq 1 }">${ mv.reservationrate }%&nbsp;</c:when>
						<c:when test="${ chartnum eq 2 }">${ mv.starsrating }&nbsp;</c:when>
						<c:when test="${ chartnum eq 3 }">${ mv.playdate }&nbsp;</c:when>
					</c:choose>
					</span></span>
					<h2 class="clearf">${ mv.title }</h2>
					<p>
						<c:choose>
							<c:when test="${ mv.rate eq '1' }">전체 관람가</c:when>
							<c:when test="${ mv.rate eq '2' }">12세 관람가</c:when>
							<c:when test="${ mv.rate eq '3' }">15세 관람가</c:when>
							<c:when test="${ mv.rate eq '4' }">청소년 관람불가</c:when>
						</c:choose>
					</p>
					<p>${ mv.genre1 }&nbsp;${ mv.genre2 }&nbsp;${ mv.genre3 }</p>
					<div class="movbtn">
						<button type="button" class="infoBtn" onclick="location.href='mov_info.bi?movno=${mv.movno}'">상세</button>
						<c:if test="${mv.isplay eq 'r'}">
						<button type="button" class="rsrvBtn" onclick="location.href='reservation.bi?movno=${mv.movno}'">예매</button>
						</c:if>						
						<c:if test="${mv.isplay eq 'y'}">
						<button type="button" class="rsrvBtn" onclick="alert('상영 전 영화입니다.')">예매</button>
						</c:if>						
					</div>
				</div>
				</div>				
			</li>
		</c:forEach>			
		</ul>
	</div>
	<!-- 뉴스 -->
	<div id="newsbox" class="clearf">
	<h2 id="newstit">뉴스</h2>
		
		<div id="news" class="nctgory">
			<p class="nsect">뉴스</p>			
				<div class="newsimg"><img src="newsImage.bi?id=${newsimg.newsno}" /></div>
			<div class="nlist">
				<c:forEach var="n" items="${ newslist }" varStatus="st">
				<c:if test="${st.count eq 1}">		
					<h2><a href="news_v.bi?newsno=${ n.newsno }">${ n.newstit }</a></h2>
					<span><a href="news_all.bi?newstype=1">+more</a></span>
				</c:if>
				<c:if test="${st.count ne 1}">
				<p class="clearf"><a href="news_v.bi?newsno=${ n.newsno }">${ n.newstit }</a></p>
				</c:if>
				</c:forEach>				
			</div>
		</div>
		
		<div id="interview" class="nctgory">
			<p class="nsect">인터뷰</p>			
				<div class="newsimg"><img src="newsImage.bi?id=${interviewimg.newsno}" /></div>
			<div class="nlist">
				<c:forEach var="i" items="${ interviewlist }" varStatus="st">
				<c:if test="${st.count eq 1}">		
					<h2><a href="news_v.bi?newsno=${ i.newsno }">${ i.newstit }</a></h2>
					<span><a href="news_all.bi?newstype=2">+more</a></span>
				</c:if>
				<c:if test="${st.count ne 1}">
				<p class="clearf"><a href="news_v.bi?newsno=${ i.newsno }">${ i.newstit }</a></p>
				</c:if>
				</c:forEach>	
			</div>
		</div>
	
		<div id="review" class="nctgory">
		
			<p class="nsect">리뷰</p>
				<div class="newsimg"><img src="newsImage.bi?id=${reviewimg.newsno}" /></div>
			<div class="nlist">
				<c:forEach var="r" items="${ reviewlist }" varStatus="st">
				<c:if test="${st.count eq 1}">		
					<h2><a href="news_v.bi?newsno=${ r.newsno }">${ r.newstit }</a></h2>
					<span><a href="news_all.bi?newstype=3">+more</a></span>
				</c:if>
				<c:if test="${st.count ne 1}">
				<p class="clearf"><a href="news_v.bi?newsno=${ r.newsno }">${ r.newstit }</a></p>
				</c:if>
				</c:forEach>	
			</div>
		</div>
	</div>	
</div>
<script type="text/javascript">
	var nlist = document.getElementsByClassName("nlist");
	var nctgory = document.getElementsByClassName("nctgory");	
	for (var i=0; i<nctgory.length; ++i) {dpnlist(i);}	
	function dpnlist(i) {
		$( nctgory[i] ).hover(function() {$( nlist[i] ).slideToggle("fast");});
	}
	
	var box = document.getElementsByClassName("box");
	var poster = document.getElementsByClassName("posterimg");
	for (var i=0; i<poster.length; ++i) {ftbox(i);}	
	function ftbox(i) {
		$( poster[i] ).hover(function() {$( box[i] ).slideToggle();});
	}
</script>